<template>
	<div class="ll-page flex">
		<div class="ll-page-container">
			<!-- 邀请码信息 -->
			<div class="ll-page-container-info flex flex-col justify-between">
				<h1>
					<span class="mr-1" />
					邀请码信息
				</h1>
				<ul class="flex">
					<li>
						<div class="title">邀请码</div>
						<p class="dsc">{{ invitationCodeInfo.code }}</p>
					</li>
					<li>
						<div class="title">邀请码有效期</div>
						<p class="dsc">
							{{ moment(invitationCodeInfo.startTime).format('YYYY/MM/DD') }}-{{
								moment(invitationCodeInfo.endTime).format('YYYY/MM/DD')
							}}
						</p>
					</li>
					<li>
						<div class="title">福利形式</div>
						<p class="dsc">{{ invitationCodeInfo.type === 1 ? '赠送素材资源' : '' }}</p>
					</li>
					<li>
						<div class="title">福利周期</div>
						<p v-for="(item, index) in cycleType" :key="index" class="dsc">
							<span v-if="invitationCodeInfo.cycleType === item.value">{{ item.label }}</span>
						</p>
					</li>
					<li>
						<div class="title">福利次数</div>
						<p class="dsc">{{ invitationCodeInfo.download }}</p>
					</li>
					<li>
						<div class="title">合作方</div>
						<p class="dsc">{{ invitationCodeInfo.partnerName }}</p>
					</li>
					<li>
						<div class="title">使用次数</div>
						<p class="dsc">
							{{
								invitationCodeInfo.maxUse === -999
									? invitationCodeInfo.useCount + '/' + '不限'
									: invitationCodeInfo.useCount + '/' + invitationCodeInfo.maxUse
							}}
						</p>
					</li>
					<li>
						<div class="title">状态</div>
						<p v-for="(item, index) in status" :key="index" class="dsc">
							<span
								v-if="invitationCodeInfo.status === item.value"
								class="inline-block text-center w-12 br-4"
								:style="item.style"
							>
								{{ item.label }}
							</span>
						</p>
					</li>
					<li>
						<div class="title">创建人</div>
						<p class="dsc">{{ invitationCodeInfo.createUser }}</p>
					</li>
					<li>
						<div class="title">创建时间</div>
						<p class="dsc">
							{{ moment(invitationCodeInfo.createTime).format('YYYY/MM/DD HH:mm:ss') }}
						</p>
					</li>
				</ul>
			</div>
			<!-- 表格信息 -->
			<div class="ll-page-container-content flex flex-col">
				<div class="ll-page-container-content-top flex justify-between">
					<h1>
						<span class="mr-1" />
						使用情况
					</h1>
					<n-button type="success" size="small" @click="handleExport">数据导出</n-button>
				</div>
				<!-- S 表格 -->
				<div class="ll-page-container-content-table mt-2">
					<n-data-table
						:columns="columns"
						:data="tabelData"
						:pagination="pagination"
						:remote="true"
						:loading="tableLoading"
						size="small"
						flex-height
						:style="{ height: '100%' }"
					>
						<template #empty>
							<div class="flex flex-col items-center">
								<img style="height: 100px" src="@/assets/images/img_form_none@3x.png" alt="" />
								<span style="color: #666">暂无数据</span>
							</div>
						</template>
					</n-data-table>
				</div>
			</div>
			<!-- 查看情况 -->
			<n-modal
				v-model:show="situationModal"
				:title="situationFlag === 1 ? '探店情况' : '素材情况'"
				preset="card"
				style="width: 80%; min-width: 1000px; height: 80%; min-height: 600px"
			>
				<div class="modal-container">
					<div class="modal-container-top flex justify-between">
						<ul class="flex">
							<li class="mr-4">名称：{{ situationInfo.userName }}</li>
							<li class="mr-4">联系电话：{{ situationInfo.phone }}</li>
							<li class="mr-4">申请日期：{{ situationInfo.time }}</li>
						</ul>
						<n-button type="success" size="small" @click="handleSituationExport">数据导出</n-button>
					</div>
					<div class="modal-container-table">
						<n-data-table
							:columns="situationColumns"
							:data="situationTabelData"
							:pagination="situationPagination"
							:remote="true"
							:loading="situationTableLoading"
							size="small"
							flex-height
							:style="{ height: '100%' }"
						>
							<template #empty>
								<div class="flex flex-col items-center">
									<img style="height: 100px" src="@/assets/images/img_form_none@3x.png" alt="" />
									<span style="color: #666">暂无数据</span>
								</div>
							</template>
						</n-data-table>
					</div>
				</div>
			</n-modal>
		</div>
	</div>
</template>
<script setup>
import { h, ref, reactive, nextTick, watch } from 'vue';
import moment from 'moment';
import { NButton, useDialog } from 'naive-ui';
// 导入API接口
import {
	getList,
	getDetail,
	getTDList,
	getSCList,
	exportList,
	exportTDList,
	exportSCList
} from '@/api/usage';
import { useRoute } from 'vue-router';
const route = useRoute();
const dialog = useDialog();
// 邀请码详情
const invitationCodeInfo = ref({});
// 福利周期
const cycleType = ref([
	{ value: 1, label: '每日' },
	{ value: 2, label: '每周' },
	{ value: 3, label: '每月' },
	{ value: 4, label: '每季度' },
	{ value: 5, label: '每年' },
	{ value: 9, label: '一次性' }
]);
// 状态
const status = ref([
	{
		label: '未使用',
		value: 0,
		style: 'font-size:12px;color:#1D6FE9;background: rgba(51, 102, 255, 0.08);'
	},
	{
		label: '已使用',
		value: 1,
		style: 'font-size:12px;color:#57AE59;background: rgba(143, 179, 154, 0.08);'
	},
	{
		label: '已过期',
		value: 2,
		style: 'font-size:12px;color:#F55F4E;background: rgba(179, 143, 143, 0.08);'
	},
	{
		label: '已作废',
		value: 3,
		style: 'font-size:12px;color:#666666;background: rgba(163, 163, 163, 0.08);'
	}
]);

// 获取邀请码信息并获取使用情况列表
const getInvitationCodeDetail = async () => {
	// formValue.search = 1;
	id.value = route.query.id;
	let res = null;
	res = await getDetail({ id: id.value });
	if (res.code === 200) {
		invitationCodeInfo.value = res.data;
		formValue.search = res.data.code;
	}
};

// 使用情况查询条件
const formValue = reactive({
	page: 1,
	size: 10,
	search: null
});
// 探店、素材情况查询条件
const situationFormValue = reactive({
	page: 1,
	size: 10,
	search: null
});

// 表格
const columns = ref([
	{
		title: '使用信息',
		width: '240px',
		render(row) {
			return [
				h('div', {}, `名称：${row.userName}`),
				h('div', {}, `联系电话：${row.phone}`),
				h('div', {}, `申请日期：${row.time}`)
			];
		}
	},
	{
		title: '素材信息',
		width: '200px',
		render(row) {
			return [h('div', {}, `照片：${row.photo} 张`), h('div', {}, `视频：${row.video} 个`)];
		}
	},
	{
		title: '探店信息',
		width: '220px',
		render(row) {
			return [
				h('div', {}, `已探店：${row.probeShop} 次`),
				h('div', {}, `商品销量：${row.sales}`),
				h('div', {}, `商品核销量：${row.use}`)
			];
		}
	},
	{
		title: '素材收益',
		width: '220px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.materialIncome}`),
				h('div', {}, `照片收益：¥ ${row.photoMaterialIncome}`),
				h('div', {}, `视频收益：¥ ${row.videoMaterialIncome}`)
			];
		}
	},
	{
		title: '探店收益',
		width: '220px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.probeShopAllIncome}`),
				h('div', {}, `探店收益：¥ ${row.probeShopIncome}`),
				h('div', {}, `商品收益：¥ ${row.probeShopProductIncome}`)
			];
		}
	},
	{
		title: '操作',
		width: '220px',
		render(row, index) {
			return [
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () => handleShopSearch(row)
					},
					{ default: () => '探店情况' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () => handleMaterialSituation(row)
					},
					{ default: () => '素材情况' }
				)
			];
		}
	}
]);
const tabelData = ref([]);
const tableLoading = ref(false);
const pagination = reactive({
	page: 1,
	pageSize: formValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		pagination.page = page;
		formValue.pageIndex = page;
		fetchData();
	},
	onPageSizeChange: (pageSize) => {
		pagination.pageSize = pageSize;
		formValue.pageSize = pageSize;
		formValue.pageIndex = 1;
		pagination.page = 1;
		fetchData();
	}
});
// 模态情况表格
const situationColumns = ref([]);
// 探店情况表格
const tdColumns = [
	{
		title: '产品信息',
		render(row) {
			return [
				h('div', {}, `订单号：${row.orderId}`),
				h('div', {}, `产品ID：${row.productId}`),
				h('div', {}, `名称：${row.productName}`)
			];
		}
	},
	{ title: '探店设置', key: 'setting' },
	{
		title: '视频信息',
		render(row) {
			return [h('div', {}, `视频ID：${row.videoId}`), h('div', {}, `视频链接：${row.videoUrl}`)];
		}
	},
	{ title: '产出销量', key: 'salt' },
	{ title: '核销量', key: 'use' },
	{
		title: '一口价收益',
		render(row) {
			return [h('div', {}, `¥ ${row.income}`)];
		}
	},
	{
		title: '核销收益',
		render(row) {
			return [h('div', {}, `¥ ${row.useIncome}`)];
		}
	},
	{
		title: '总收益',
		render(row) {
			return [h('div', {}, `¥ ${row.allIncome}`)];
		}
	}
];
// 素材情况表格
const scColumns = [
	{
		title: '产品信息',
		render(row) {
			return [h('div', {}, `产品ID：${row.productId}`), h('div', {}, `名称：${row.productName}`)];
		}
	},
	{
		title: '素材要求',
		render(row) {
			return [
				h('div', {}, `上传日期：${row.time}`),
				h('div', {}, `照片/视频定价：${row.price}`),
				h('div', {}, `照片/视频平台收益：${row.income}`),
				h('div', {}, `照片/视频创作者收益：${row.createIncome}`)
			];
		}
	},
	{
		title: '上传信息',
		render(row) {
			return [h('div', {}, `照片：${row.onPhoto} 张`), h('div', {}, `视频：${row.onVideo} 个`)];
		}
	},
	{
		title: '销量信息',
		render(row) {
			return [h('div', {}, `照片：${row.saltPhoto} 张`), h('div', {}, `视频：${row.saltVideo} 个`)];
		}
	},
	{
		title: '销售金额',
		render(row) {
			return [h('div', {}, `照片：¥ ${row.photoMoney}`), h('div', {}, `视频：¥ ${row.videoMoney}`)];
		}
	},
	{
		title: '总收益',
		render(row) {
			return [h('div', {}, `¥ ${row.allMoney}`)];
		}
	}
];
const situationTabelData = ref([]);
const situationTableLoading = ref(false);
const situationPagination = reactive({
	page: 1,
	pageSize: situationFormValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		situationPagination.page = page;
		situationFormValue.pageIndex = page;
		situationFlag.value === 1 ? fetchTDData() : fetchSCData();
	},
	onPageSizeChange: (pageSize) => {
		situationPagination.pageSize = pageSize;
		situationFormValue.pageSize = pageSize;
		situationFormValue.pageIndex = 1;
		situationPagination.page = 1;
		situationFlag.value === 1 ? fetchTDData() : fetchSCData();
	}
});
const id = ref(0);

// 获取使用情况列表
const fetchData = async () => {
	let res = null;
	tableLoading.value = true;
	res = await getList(formValue);
	tableLoading.value = false;
	if (res && res.code === 200) {
		tabelData.value = res.data.data;
		pagination.itemCount = res.data.rowCount;
	}
};
// 获取探店情况列表
const fetchTDData = async () => {
	let res = null;
	situationTableLoading.value = true;
	res = await getTDList(situationFormValue);
	situationTableLoading.value = false;
	if (res && res.code === 200) {
		situationTabelData.value = res.data.data;
		situationPagination.itemCount = res.data.rowCount;
		situationColumns.value = tdColumns;
	}
};
// 获取素材情况列表
const fetchSCData = async () => {
	let res = null;
	situationTableLoading.value = true;
	res = await getSCList(situationFormValue);
	situationTableLoading.value = false;
	if (res && res.code === 200) {
		situationTabelData.value = res.data.data;
		situationPagination.itemCount = res.data.rowCount;
		situationColumns.value = scColumns;
	}
};

// 初始化数据
const initData = async () => {
	await getInvitationCodeDetail();
	await fetchData();
};

// 初始化数据
const resetData = () => {
	formValue.pageIndex = 1;
	formValue.pageSize = 10;
	// 重置分页
	pagination.page = 1;
	// 弹框
	situationModal.value = false;
};

nextTick(() => {
	initData();
});

// 监听路由变化
watch(
	() => route.fullPath,
	(n, o) => {
		pagination.page = 1;
		resetData();
		initData();
	}
);

const situationModal = ref(false);
const situationFlag = ref(null); // 1:探店情况 2:素材情况
const situationInfo = ref({});
// 查看探店情况
const handleShopSearch = (row) => {
	situationFlag.value = 1;
	situationFormValue.search = row.userId;
	situationInfo.value = { userName: row.userName, phone: row.phone, time: row.time };
	situationModal.value = true;
	fetchTDData();
};
// 查看素材情况
const handleMaterialSituation = (row) => {
	situationFlag.value = 2;
	situationFormValue.search = row.userId;
	situationModal.value = true;
	fetchSCData();
};
const getExcel = (name, blobObj) => {
	let elink = document.createElement('a');
	let blob = new Blob([blobObj], { type: 'application/vnd.ms-excel' });
	elink.href = URL.createObjectURL(blob);
	elink.download = name;
	elink.style.display = 'none';
	document.body.appendChild(elink);
	elink.click();
	document.body.removeChild(elink);
	URL.revokeObjectURL(blob);
};
// 导出使用情况
const handleExport = () => {
	dialog.success({
		title: '导出使用情况',
		content: '是否导出使用情况',
		positiveText: '确定',
		onPositiveClick: async () => {
			const res = await exportList({ search: formValue.search });
			if (res) return getExcel('使用情况列表.xlsx', res);
		}
	});
};
// 导出探店素材情况
const handleSituationExport = () => {
	dialog.success({
		title: situationFlag.value === 1 ? '导出探店情况' : '导出素材情况',
		content: situationFlag.value === 1 ? '是否导出探店情况' : '是否导出素材情况',
		positiveText: '确定',
		onPositiveClick: async () => {
			if (situationFlag.value === 1) {
				const res = await exportTDList({ search: situationFormValue.search });
				if (res) return getExcel('探店情况列表.xlsx', res);
			} else {
				const res = await exportSCList({ search: situationFormValue.search });
				if (res) return getExcel('素材情况列表.xlsx', res);
			}
		}
	});
};
</script>

<style lang="less" scoped>
.ll-page {
	overflow-x: auto;
	overflow-y: hidden;
	height: 100%;
	padding: 10px;
	background-color: #ffffff;
	&-container {
		background: linear-gradient(180deg, #f3f6ff 0%, #fcfdff 100%);
		border-radius: 8px;
		border: 1px solid #f0f0f0;
		flex-direction: column;
		display: flex;
		height: 100%;
		&-info {
			margin: 10px;
			padding: 10px 10px 10px;
			background: #fff;
			height: 130px;

			// overflow-y: scroll;
			h1 {
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				color: #333333;
				span {
					position: relative;
					top: 1px;
					display: inline-block;
					width: 3px;
					height: 14px;
					background: #57ae59;
				}
			}
			ul {
				li {
					margin: 0 40px 0 10px;
					overflow: hidden;
					.title {
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
					.dsc {
						margin-top: 5px;
						font-size: 14px;
						font-family: PingFangSC-Medium, PingFang SC;
						color: #333333;
					}
				}
			}
		}
		&-content {
			margin: 0 10px 10px;
			padding: 10px;
			height: 100%;
			background: #fff;
			&-top {
				h1 {
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					color: #333333;
					span {
						position: relative;
						top: 1px;
						display: inline-block;
						width: 3px;
						height: 14px;
						background: #57ae59;
					}
				}
				// display: flex;
			}
			&-table {
				overflow: hidden;
				flex: 1 1 0%;
			}
		}
	}
	&-table {
		padding: 10px;
		overflow: hidden;
		flex: 1 1 0%;
	}
}
.modal-container {
	height: 500px;
	display: flex;
	flex-direction: column;
	&-top {
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		color: #f5894e;
		margin-bottom: 10px;
	}
	&-table {
		overflow: hidden;
		flex: 1 1 0%;
	}
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.flex-col {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.flex-1 {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}
.flex-wrap {
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.items-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.justify-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.justify-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.mt-1 {
	margin-top: 0.25rem; /* 4px */
}
.mt-2 {
	margin-top: 0.5rem; /* 8px */
}
.ml-1 {
	margin-left: 0.25rem; /* 4px */
}
.mr-1 {
	margin-right: 0.25rem; /* 4px */
}
.mb-2 {
	margin-bottom: 0.5rem; /* 8px */
}
.inline-block {
	display: inline-block;
}
.text-center {
	text-align: center;
}
.w-12 {
	width: 3rem; /* 48px */
}
.br-4 {
	border-radius: 4px;
}
</style>
